<style>
    .time {
        font-size: 13px;
        color: #999;
    }
    
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .action {
        color: #409eff;
        font-size: 14px;
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    
    .clearfix:after {
        clear: both
    }

    #payment_detail .el-table__body-wrapper {
        overflow-y: overlay;
        overflow-x: hidden;
        position: relative;
    }
</style>

<template>
    <div id="payment_detail" class="row">
        <div class="col-md-3">
            <el-card :body-style="{ padding: '0px' }">
                <a :href="cfg.aphf_img_baseurl + payment.PayReceipt" target="view_window">
                    <img :src="cfg.aphf_img_baseurl + payment.PayReceipt" class="image">
                </a>
                <div style="padding: 14px;">
                    <span>{{payment.PayNo}}</span>
                    <div class="bottom clearfix">
                        <time class="time">{{ payment.CreateTime | time }}</time>
                        <a :href="cfg.aphf_img_baseurl + payment.PayReceipt" class="action" target="view_window">查看大图</a>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="col-md-9">
            <el-card class="box-card">
                <div class="row">
                    <div class="col-md-2">支付人</div>
                    <div class="col-md-2">{{payment.Account.User.Name}}</div>
                    <div class="col-md-2">支付金额</div>
                    <div class="col-md-2">
                        <i class="fa fa-cny"></i>
                        {{ payment.TotalPrice | currency }}
                    </div>
                    <div class="col-md-2">支付方式</div>
                    <div class="col-md-2">{{ payment.PayMethod | payMethod }}</div>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 15px; max-height: 500px; overflow-y: auto;">
                <el-collapse>
                    <el-collapse-item v-for="order in payment.Orders" :key="order.OrderId" :title="order.OrderNo">
                        <el-table :data="order.OrderItems" size="small" border style="width: 100%">
                            <el-table-column align="center" prop="ItemName" label="名称"></el-table-column>
                            <el-table-column align="center" label="类型">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.ItemType | priceType }}</span>
                                </template>                                
                            </el-table-column>
                            <el-table-column align="center" prop="Quantity" label="数量"></el-table-column>
                            <el-table-column align="center" label="单价">
                                <template slot-scope="scope">
                                    <i class="fa fa-cny"></i>
                                    <span>{{ scope.row.UnitPrice | currency }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="总价">
                                <template slot-scope="scope">
                                    <i class="fa fa-cny"></i>
                                    <span>{{ scope.row.TotalPrice | currency }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
        </div>
    </div>  
</template>

<script>

import {CurrencyFormat, PayMethodFormat, PriceTypeFormat, TimeFormat} from 'web/utils';

export default {
    props: {
        'payment': {
            type: Object
        }
    },
    filters: {
        time: TimeFormat,
        currency: CurrencyFormat,
        payMethod: PayMethodFormat,
        priceType: PriceTypeFormat
    },    
}
</script>
